import { Button } from "antd";
import { lazy, Suspense, useState } from "react";

const TabOne = lazy(() => import("@/views/home/components/tab-one.tsx"));
const TabTwo = lazy(() => import("@/views/home/components/tab-two.tsx"));
const TabThree = lazy(() => import("@/views/home/components/tab-three.tsx"));

const Home = () => {
  const tabs = ["TabOne", "TabTwo", "TabThree"];
  const [curTab, setCurTab] = useState("TabOne");

  return (
    <div>
      <h1>Home</h1>

      {tabs.map((item) => (
        <Button
          key={item}
          type={curTab === item ? "primary" : "default"}
          onClick={() => setCurTab(item)}
        >
          {item}
        </Button>
      ))}

      {/*
        lazy 的组件，需要配合 Suspense 一起使用
      */}
      <Suspense>
        {curTab === "TabOne" && <TabOne />}
        {curTab === "TabTwo" && <TabTwo />}
        {curTab === "TabThree" && <TabThree />}
      </Suspense>
    </div>
  );
};

export default Home;
